<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form ref="form" :model="form" label-width="80px" class="flex">
            <el-form-item label="所属网点" prop="networkNameId">
              <el-select
                v-model="form.networkNameId"
                placeholder="请选择所属网点"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="配置名称"
              style="margin-left: 10px"
              prop="dispositionName"
            >
              <el-input
                v-model="form.dispositionName"
                placeholder="请输入配置名称"
                style="width: 286px"
              />
            </el-form-item>
            <el-form-item
              label="导出类型"
              style="margin-left: 10px"
              prop="exportType"
            >
              <el-select
                v-model="form.exportType"
                placeholder="请选择导出类型"
                style="width: 286px"
              >
                <el-option
                  v-for="(item, index) in dctype"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="导出对象名称"
              label-width="120px"
              style="margin-left: 10px"
              prop="exportName"
            >
              <el-input
                v-model="form.exportName"
                placeholder="请输入"
                style="width: 286px"
              />
            </el-form-item>
            <el-form-item style="margin-left: 15px">
              <el-button class="cx" @click="search">查询</el-button>
              <el-button class="cz" @click="clear">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div>当前页共{{ tableData.length }}项</div>
      </el-col>
      <el-col :span="2">
        <div>
          <!-- <el-button type="primary" @click="onSubmit">新增</el-button> -->
          <el-button
            :class="!multipleSelection.length ? 'del' : 'del1'"
            :disabled="!multipleSelection.length"
            @click="deleteData"
            >删除</el-button
          >
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <elltable
            ref="multipleTable"
            :loading="loading"
            :data="tableData"
            :th="th"
            @selection-change="handleSelectionChange"
          >
            <template v-slot:before-columns>
              <el-table-column
                v-if="tableData.length > 0"
                type="selection"
                width="55"
              />
            </template>
          </elltable>
        </div>
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  getOutletsList,
  addSubject,
  exportSearch,
  exportDelete
} from '@/api/dashboard'

export default {
  data() {
    return {
      // 导出类型
      dctype: [
        { value: 0, label: '客户' },
        { value: 1, label: '承包区' },
        { value: 2, label: '业务员' }
      ],
      loading: false,
      networkList: [],

      form: {
        networkNameId: '',
        dispositionName: '',
        exportType: '',
        exportName: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      th: [],
      tableData: [],
      // pages: {
      //   pageNum: 1,
      //   pageSize: 1
      // },
      total: 0,
      multipleSelection: []
    }
  },
  created() {
    this.getOutLet()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 打开弹窗
    onSubmit() {
      this.dialogFormVisible = true
    },
    // 添加自定义二级科目
    addSub() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addSubject(this.addForm).then((res) => {
            if (res.code === 200) {
              this.$message({
                message: res.data,
                type: 'success'
              })
              this.dialogFormVisible = false
            } else {
              this.$message({
                message: res.msg,
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 查询
    search() {
      this.loading = true
      exportSearch(this.form).then((res) => {
        console.log('查询', res)
        if (res.code === 200) {
          this.th = res.data.fields
          this.tableData = res.data.list.data
          this.total = res.data.list.total
        } else {
          this.tableData = []
          this.total = 0
        }
      })
      this.loading = false
    },
    // 批量删除
    deleteData() {
      const ids = this.multipleSelection.map((obj) => obj.id)
      console.log(ids)
      exportDelete(ids).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.search()
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    },

    // 重置
    clear() {
      this.$refs.form.resetFields()
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.search()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.del1 {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  color: #333;
  border: 1px solid #666666;
}
.del {
  width: 80px;
  height: 42px;
  border-radius: 21px;
}
</style>
